<template>
	<div class="flex align-center" v-if="xingNum >= 0">
		<template v-if="item.showXing !== false">
			<IconXing class="rate-xing" v-for="item in xingNum" :key="item"></IconXing>
			<p class="text-xing" v-show="item.propName">{{ model[item.propName] }}</p>
		</template>
		<p v-else class="btn-xing" v-show="xingNum">
			<span>{{ xingNum }}</span>
		</p>
	</div>
	<p v-else>/</p>
</template>

<script setup lang="ts">
const props = defineProps<{
	model: any
	item?: any
}>()
const xingNum = computed(() => {
	return +props.model[props.item.prop]
})
</script>

<style scoped lang="scss">
.rate {
	font-family: 'Microsoft YaHei Bold';
	height: 27px;
	line-height: 27px;
	text-align: center;
	border-radius: 6px;
}
.rate-xing {
	width: 30.96px;
	height: 26.5px;
	background: transparent;
}
.text-xing {
  width:57px;
  @extend .rate;
	background: #fff3c1;
	font-weight: 700;
	font-size: 16px;
	color: #f80;
}
.btn-xing {
	width: 44px;
	background: #ffb300;
	text-align: center;
  @extend .rate;
	span {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 20px;
		text-align: left;
		color: #fff;
	}
}
</style>
